<template>
  <!-- 商品列表组件 -->
  <view class="goods_list">
    <!-- 顶部Tab 开始 -->
    <view class="tabs_title">
      <view :class="['tabs_item', [activeTabIndex == index ? 'active' : '']]" v-for="(item, index) in ['综合', '销量', '价格']" :key="index" @tap="handleItemChange(index)">
        {{ item }}
      </view>
    </view>
    <!-- 顶部Tab 结束 -->
    <!-- 商品列表 开始 -->
    <scroll-view
      class="goods"
      scroll-y="true"
      lower-threshold="50"
      @scrolltolower="getGoodsList"
    >
      <view class="good" v-for="(item, index) in goodsListData.goods" :key="item.goods_id">
        <navigator :url="'../../pages/goods_detail/goods_detail?goods_id='+item.goods_id" open-type="navigate">
          <view class="good_box">
            <view class="good_logo">
              <!-- 商品LOGO -->
              <image :src="item.goods_small_logo == '' ? 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg' : item.goods_small_logo" mode="widthFix"></image>
            </view>
            <view class="good_info">
              <text class="good_name">
                <!-- 商品名称 -->
                {{ item.goods_name }}
              </text>
              <text class="good_price">
                <!-- 商品价格 -->
                ¥ {{ item.goods_price }}
              </text>
            </view>
          </view>
        </navigator>
      </view>
    </scroll-view>
    <!-- 商品列表 结束 -->
  </view>
</template>

<script>
export default {
  name: 'GoodsList',
  data() {
    return {
      activeTabIndex: 0,
      goodsListData: {},
    };
  },
  props: {
    goodsList: {
      type: Object,
      required: true
    }
  },
  
  // 生命周期 组件已创建
  created() {
    var _me = this;
    this.goodsListData = this.$props.goodsList;
    // 开启 "列表被改变" 监听
    uni.$on('GoodsListChange', this.goodsListChange);
  },
  // 生命周期 组件已销毁
  destroyed() {
    // 关闭 "列表被改变" 监听
    uni.$off('GoodsListChange', this.goodsListChange);
  },
  methods: {
    goodsListChange: function(newGoodsList) {
      // console.log('监听事件【列表被改变】', '子组件检测到列表被改变');
      this.goodsListData = newGoodsList;
      // console.log(this.goodsListData);
    },
    handleItemChange: function(index) {
      // console.log(e);
      this.activeTabIndex = index;
    },
    getGoodsList() {
      uni.$emit('GetGoodsList');
    },
  }
};
</script>

<style lang="scss">
/* 商品列表组件 */
.goods_list {
  // height: 100%;
  /* 顶部Tab 开始 */
  .tabs_title {
    display: flex;
    height: 90rpx;
    .tabs_item {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      &.active {
        border-bottom: 2rpx solid red;
      }
    }
  }
  /* 顶部Tab 结束 */
  /* 商品列表 开始 */
  scroll-view.goods {
    width: 100%;
    height: calc(100vh - var(--window-top) - 90rpx - 90rpx);
    .good {
      width: 100%;
      justify-content: center;
      .good_box {
        width: 100%;
        height: 80%;
        display: flex;
        padding: 20rpx 0;
        // border: 1rpx dashed #0000ff;
        .good_logo {
          flex: 3;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // border: 1rpx dashed #ff0000;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .good_info {
          flex: 7;
          .good_name {
            display: inline-block;
            width: 100%;
            height: 70%;
            font-size: 30rpx;
            padding-left: 10rpx;
            // border: 1rpx dashed #ff00ff;
          }
          .good_price {
            display: inline-block;
            width: 100%;
            height: 30%;
            font-size: 45rpx;
            padding-left: 20rpx;
            color: #ff0000;
            // border: 1rpx dashed #ffff00;
          }
        }
      }
    }
  }
  /* 商品列表 结束 */
}
</style>
